本文網址: https://mike.coderbridge.io/2023/12/28/about-html-meta/
由於之前吃了meta一虧(網站method的http都變成https!?)，這次就研究了一下，並且把常用到的東西整理下來，如下。
1. Charset - 字符編碼聲明:
用於指定網頁的字符編碼。
<meta charset="UTF-8">
2. Content-Type - 內容類型:
用於指定 HTML 文檔的 MIME 類型和字符編碼。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
3. Viewport - 視口:
用於控制視口的大小和比例，非常重要的標籤，用於響應式設計。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4. Description - 描述:
用於描述網頁的內容，對搜索引擎優化（SEO）有重要作用。
<meta name="description" content="頁面描述">
5. Keywords - 關鍵詞:
指定網頁的關鍵詞，以逗號分隔。
<meta name="keywords" content="HTML, CSS, JavaScript">
6. Author - 作者:
用於指定網頁的字符編碼。
<meta name="author" content="作者名">
7. Refresh - 刷新:
指定頁面自動刷新的時間間隔（秒）。
<meta http-equiv="refresh" content="30">
8. Cache-Control - 緩存控制:
控制頁面的緩存策略。其中，public 及 private 還可以設定 max-age=... 來指定快取多久後會過期；例如 Cache-Control: private max-age=2592000，描述的是此資源僅可以被本地快取，有效期限是 30 天（60 x 60 x 24 x 30 = 2592000）
// public：公開的資源，可以被所有節點暫存
<meta http-equiv="Cache-Control" content="public">
// private：私有的資源，只被允許儲存成使用者的本地快取
<meta http-equiv="Cache-Control" content="private">
// no-cache：本地暫存，但使用前會先詢問過期沒
<meta http-equiv="Cache-Control" content="no-cache">
// no-store：不開快取
<meta http-equiv="Cache-Control" content="no-store">
9. Content-Security-Policy - 內容安全策略:
在HTML中使用 http-equiv="Content-Security-Policy"（CSP）時，可以通過設定不同的content值來控制頁面的安全策略。
CSP的內容相當多，可以查看更詳細全面的資料。
// default-src: 定義加載各種資源的默認策略。
// 例: default-src 'self'; 只允許加載來自同一來源的資源。
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
// 自動將HTTP請求升級為HTTPS。
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests;">
10. X-UA-Compatible - 瀏覽器兼容性:
指定 Internet Explorer 使用最新的引擎渲染頁面。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
11. Robots - 機器人指令:
指示搜索引擎爬蟲應該如何索引頁面和跟蹤鏈接。
<meta name="robots" content="index,follow">
12. Theme-Color - 主題顏色 (常用於移動設備瀏覽器):
指定瀏覽器工具欄的顏色。
<meta name="theme-color" content="#ff5733">
13. Apple Mobile Web App Capable - 蘋果移動網絡應用能力:
指定網站是否運行為蘋果設備的 Web App。
<meta name="apple-mobile-web-app-capable" content="yes">
參考:
